<template>
  <view class="coupon-content" v-if="obj.reOrderType == '3'">
    <view class="fs30 mb30 fb">套券信息</view>
    <view class="flex flex-m fs26 mb20">
      <view class="fb">{{ obj.package.couponName }}</view>
      <view class="flex-right fb">￥{{ obj.package.saleTotalPrice }}</view>
    </view>
    <view class="flex mb20 flex-m coupon-msg-item">
      <view class="coupon-msg-item_label mr20 fs24">套券数量</view>
      <view class="fs24 coupon-msg-item_content"
        >{{ obj.package.couponNum }}张</view
      >
    </view>
    <view class="flex mb20 flex-m coupon-msg-item" v-if="!isRefundTicket">
      <view class="coupon-msg-item_label mr20 fs24">本单使用</view>
      <view class="fs24 coupon-msg-item_content"
        >{{ obj.package.useNum }}张<text
          v-if="obj.package.difference !== '0.00'"
          >,补差{{ obj.package.difference }}元</text
        ></view
      >
    </view>
    <view class="flex mb20 flex-m coupon-msg-item" v-if="!isRefundTicket">
      <view class="coupon-msg-item_label mr20 fs24">本单已省</view>
      <view class="fs24 coupon-msg-item_content"
        >￥{{ obj.package.discountPrice }}</view
      >
    </view>
    <view class="flex mb20 flex-m coupon-msg-item" v-if="!isRefundTicket">
      <view class="coupon-msg-item_label mr20 fs24">剩余可用</view>
      <view class="fs24 coupon-msg-item_content"
        >{{
          obj.package.residueCouponNum
        }}张（可在“我的->电影券”中查看剩余优惠券）</view
      >
    </view>
    <view
      class="flex mb20 flex-m coupon-msg-item"
      v-if="obj.package.residueCouponNum != '0' && obj.package.endTime"
    >
      <view class="coupon-msg-item_label mr20 fs24">有效期</view>
      <view class="fs24 coupon-msg-item_content">{{
        obj.package.endTime
      }}</view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      customClass: {
        type: String
      },
      obj: {
        type: Object,
        default: () => {
          return {}
        }
      },
      orderStatus: {
        type: String,
        default: ''
      }
    },
    data() {
      return {}
    },
    methods: {
      handleClick() {
        this.$emit('click')
      }
    },
    computed: {
      isRefundTicket() {
        return this.orderStatus === 'film-5'
      }
      //   remainCoupon() {
      //     if (this.obj.package.couponNum && this.obj.package.useNum) {
      //       return this.obj.package.couponNum - this.obj.package.useNum
      //     } else {
      //       return ''
      //   }
      // }
    }
  }
</script>

<style lang="scss" scoped>
  .coupon-content {
    background: #fff;
    padding: 30rpx;
    .coupon-msg-item {
      align-items: flex-start;
      &_label {
        width: 104rpx;
        color: #888;
        // text-align: right;
      }
      &_content {
        color: #333;
      }
    }
  }
</style>
